import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:ytbusiness/config/yt_theme.dart';
import 'package:ytbusiness/state/user_role.dart';
import 'package:ytbusiness/utils/helper.dart';
import 'package:ytbusiness/utils/screen_adaptation.dart';
import 'package:ytbusiness/widgets/widgets.dart';

//选择配件
class SelectAccessories extends StatefulWidget {
  //{title}
  final Map<String, dynamic> arguments;

  const SelectAccessories({Key key, this.arguments}) : super(key: key);

  @override
  _SelectAccessoriesState createState() => _SelectAccessoriesState();
}

class _SelectAccessoriesState extends State<SelectAccessories> {
  List<String> typeList = [
    "原厂原包",
    "OEM",
    "品牌",
    "拆车",
    "OEM",
    "品牌",
    "拆车",
    "OEM",
    "品牌",
    "拆车",
    "OEM",
    "品牌",
    "拆车",
    "OEM",
    "品牌",
    "拆车",
    "OEM",
    "品牌",
    "拆车"
  ];
  int count = 100;

  int _role;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _role = Provider.of<UserRole>(context, listen: false).role;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: customAppBar(context, title: "${widget.arguments["title"]}"),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  padding: EdgeInsets.only(
                      top: setWidth(15),
                      bottom: setWidth(15),
                      left: setWidth(15)),
                  child: Text(
                    "配件列表",
                    style: TextStyle(
                        color: Color(0xff333333),
                        fontSize: setSp(16),
                        fontWeight: FontWeight.w600),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(bottom: setWidth(70)),
                  child: ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: 10,
                      itemBuilder: (context, index) {
                        return _item(index);
                      }),
                )
              ],
            ),
          ),
          //确定
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: setWidth(0.5),
                    color: Color(0xffE5E5E5),
                  ),
                  SizedBox(
                    height: setWidth(5),
                  ),
                  Row(
                    children: [
                      Expanded(
                        flex: 1,
                        child: GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: Container(
                            margin: EdgeInsets.only(
                                left: setWidth(15),
                                right: setWidth(15),
                                bottom: setWidth(10)),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(3)),
                            alignment: Alignment.center,
                            padding: EdgeInsets.only(
                                top: setWidth(15), bottom: setWidth(15)),
                            child: Text(
                              "返回",
                              style: TextStyle(
                                  color: YTTheme.theme,
                                  fontSize: setSp(15),
                                  fontWeight: FontWeight.w500),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            if (Provider.of<UserRole>(context, listen: false)
                                    .role ==
                                1) {
                              Navigator.popUntil(context,
                                  ModalRoute.withName('repairs_inquiry'));
                            } else {
                              Navigator.popUntil(
                                  context,
                                  ModalRoute.withName(
                                      'scout_assessment_details'));
                            }
                          },
                          child: Container(
                            margin: EdgeInsets.only(
                                left: setWidth(15),
                                right: setWidth(15),
                                bottom: setWidth(10)),
                            decoration: BoxDecoration(
                                color: YTTheme.theme,
                                borderRadius: BorderRadius.circular(3)),
                            alignment: Alignment.center,
                            padding: EdgeInsets.only(
                                top: setWidth(15), bottom: setWidth(15)),
                            child: Text(
                              "确定",
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: setSp(15),
                                  fontWeight: FontWeight.w500),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  //配件列表
  Widget _item(int index) {
    return Container(
      padding: EdgeInsets.all(setWidth(15)),
      color: index % 2 == 0 ? Color(0xffF9F9F9) : Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(
                    color: Color(0xffE5E5E5),
                    borderRadius: BorderRadius.circular(3)),
                height: setWidth(80),
                width: setWidth(80),
              ),
              SizedBox(
                width: setWidth(10),
              ),
              Expanded(
                  child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: Text(
                      "车辆外观-前挡泥版-左后翼子板车辆外观-前挡泥版-左后翼子板车辆外观-前挡泥版-左后翼子板车辆外观-前挡泥版-左后翼子板",
                      style: TextStyle(
                          color: Color(0xff010015), fontSize: setSp(15)),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  SizedBox(
                    height: setWidth(5),
                  ),
                  Container(
                    child: Text(
                      "零件编号：506587TJAH01",
                      style: TextStyle(
                          color: Color(0xff999999), fontSize: setSp(12)),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  SizedBox(
                    height: setWidth(5),
                  ),
                  Container(
                    padding: EdgeInsets.only(
                        left: setWidth(9.5),
                        top: setWidth(5),
                        bottom: setWidth(5),
                        right: setWidth(8)),
                    decoration: BoxDecoration(
                        color: Color(0xffF4F4F4),
                        borderRadius: BorderRadius.circular(1)),
                    child: RichText(
                        text: TextSpan(children: [
                      TextSpan(
                        text: "属性：原厂原包",
                        style: TextStyle(
                            color: Color(0xff999999), fontSize: setSp(12)),
                      ),
                      WidgetSpan(
                          child: Container(
                        padding: EdgeInsets.only(
                            bottom: setWidth(5), left: setWidth(3)),
                        child: SizedBox(
                          width: setWidth(7.5),
                          height: setWidth(4.5),
                          child: Image.asset("assets/images/select_type.png",
                              width: setWidth(7.5),
                              height: setWidth(4.5),
                              fit: BoxFit.cover),
                        ),
                      ))
                    ])),
                  ),
                ],
              ))
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: EdgeInsets.only(left: setWidth(13), top: setWidth(7)),
                child: Text(
                  "图示编号7",
                  style:
                      TextStyle(color: Color(0xff999999), fontSize: setSp(12)),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              GestureDetector(
                onTap: () {
                  _bottomSheet(sum: count);
                },
                child: Container(
                  decoration: BoxDecoration(
                      color: _role == 1 ? Color(0xffFF921A) : Color(0xffFFD104),
                      borderRadius: BorderRadius.circular(3)),
                  padding: EdgeInsets.only(
                      top: setWidth(6),
                      bottom: setWidth(6),
                      left: setWidth(18),
                      right: setWidth(18)),
                  child: Text("选择",
                      style:
                          TextStyle(color: Colors.white, fontSize: setSp(12))),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }

  //底部弹窗
  _bottomSheet({int sum}) {
    showModalBottomSheet(
        context: context,
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(13),
            topRight: Radius.circular(13),
          ),
        ),
        builder: (BuildContext context) {
          return StatefulBuilder(
            builder: (BuildContext context, StateSetter state) {
              return Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        GestureDetector(
                          behavior: HitTestBehavior.opaque,
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: Container(
                            margin: EdgeInsets.only(
                                top: setWidth(15), right: setWidth(15)),
                            width: setWidth(18),
                            height: setWidth(18),
                            child: Image.asset(
                              "assets/images/close.png",
                              fit: BoxFit.cover,
                            ),
                          ),
                        )
                      ],
                    ),
                    Expanded(
                      child: Stack(
                        children: [
                          SingleChildScrollView(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.start,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                //弹窗商品信息
                                Container(
                                  margin: EdgeInsets.only(
                                      left: setWidth(15),
                                      right: setWidth(15),
                                      top: setWidth(17)),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Container(
                                            decoration: BoxDecoration(
                                                color: Color(0xffE5E5E5),
                                                borderRadius:
                                                    BorderRadius.circular(3)),
                                            height: setWidth(80),
                                            width: setWidth(80),
                                          ),
                                          SizedBox(
                                            width: setWidth(10),
                                          ),
                                          Expanded(
                                              child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Container(
                                                child: Text(
                                                  "车辆外观-前挡泥版-左后翼子板车辆外观-前挡泥版-左后翼子板车辆外观-前挡泥版-左后翼子板车辆外观-前挡泥版-左后翼子板",
                                                  style: TextStyle(
                                                      color: Color(0xff010015),
                                                      fontSize: setSp(15)),
                                                  maxLines: 2,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                              ),
                                              SizedBox(
                                                height: setWidth(5),
                                              ),
                                              Container(
                                                child: Text(
                                                  "零件编号：506587TJAH01",
                                                  style: TextStyle(
                                                      color: Color(0xff999999),
                                                      fontSize: setSp(12)),
                                                  maxLines: 2,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                              ),
                                            ],
                                          ))
                                        ],
                                      ),
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Container(
                                            padding: EdgeInsets.only(
                                                left: setWidth(13),
                                                top: setWidth(7)),
                                            child: Text(
                                              "图示编号7",
                                              style: TextStyle(
                                                  color: Color(0xff999999),
                                                  fontSize: setSp(12)),
                                              maxLines: 2,
                                              overflow: TextOverflow.ellipsis,
                                            ),
                                          ),
                                          //计算数量
                                          Container(
                                            child: Row(
                                              children: [
                                                GestureDetector(
                                                  onTap: () {
                                                    state(() {
                                                      sum -= 1;
                                                    });
                                                  },
                                                  child: Container(
                                                    padding: EdgeInsets.all(5),
                                                    child: Text(
                                                      "-",
                                                      style: TextStyle(
                                                          color:
                                                              Color(0xff000000),
                                                          fontSize: setSp(20)),
                                                    ),
                                                  ),
                                                ),
                                                Container(
                                                  padding: EdgeInsets.only(
                                                      top: setWidth(4),
                                                      bottom: setWidth(4),
                                                      left: setWidth(18),
                                                      right: setWidth(18)),
                                                  decoration: BoxDecoration(
                                                      color: Color(0xffF4F4F4),
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              2)),
                                                  child: Text("$sum"),
                                                ),
                                                GestureDetector(
                                                  onTap: () {
                                                    state(() {
                                                      sum += 1;
                                                    });
                                                    print(count);
                                                  },
                                                  child: Container(
                                                    padding: EdgeInsets.only(
                                                        left: setWidth(7)),
                                                    child: Text(
                                                      "+",
                                                      style: TextStyle(
                                                          color:
                                                              Color(0xff000000),
                                                          fontSize: setSp(17)),
                                                    ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: setWidth(15), top: setWidth(17)),
                                  child: Text(
                                    "属性",
                                    style: TextStyle(
                                        color: Color(0xff323232),
                                        fontSize: setSp(13),
                                        fontWeight: FontWeight.w500),
                                  ),
                                ),
                                //选择属性
                                Container(
                                  margin: EdgeInsets.only(
                                      top: setWidth(23),
                                      left: setWidth(15),
                                      right: setWidth(15)),
                                  child: Wrap(
                                    spacing: setWidth(22),
                                    runSpacing: setWidth(24),
                                    children: typeList
                                        .asMap()
                                        .map((key, value) {
                                          return MapEntry(
                                              key, _typeItem(key, value));
                                        })
                                        .values
                                        .toList(),
                                  ),
                                ),
                                SizedBox(
                                  height: setWidth(80),
                                ),
                              ],
                            ),
                          ),

                          //确定
                          Positioned(
                            left: 0,
                            right: 0,
                            bottom: 0,
                            child: Container(
                              color: Colors.white,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                    height: setWidth(0.5),
                                    color: Color(0xffE5E5E5),
                                  ),
                                  SizedBox(
                                    height: setWidth(5),
                                  ),
                                  GestureDetector(
                                    behavior: HitTestBehavior.opaque,
                                    onTap: () {
                                      //确定更新总数
                                      count = sum;
                                      Navigator.pop(context);
                                    },
                                    child: Container(
                                      margin: EdgeInsets.only(
                                          left: setWidth(15),
                                          right: setWidth(15),
                                          bottom: setWidth(10)),
                                      decoration: BoxDecoration(
                                          color: YTTheme.theme,
                                          borderRadius:
                                              BorderRadius.circular(3)),
                                      alignment: Alignment.center,
                                      padding: EdgeInsets.only(
                                          top: setWidth(15),
                                          bottom: setWidth(15)),
                                      child: Text(
                                        "确定",
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: setSp(15),
                                            fontWeight: FontWeight.w500),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              );
            },
          );
        });
  }

  //选择属性
  Widget _typeItem(int index, String title) {
    return Container(
      padding: EdgeInsets.only(
          top: setWidth(6),
          bottom: setWidth(6),
          left: setWidth(11),
          right: setWidth(11)),
      decoration: BoxDecoration(
          color: Color(0xffFFEBDE),
          border: Border.all(color: Color(0xffFF6701), width: setWidth(0.5)),
          borderRadius: BorderRadius.circular(2)),
      child: Text(
        title,
        style: TextStyle(color: Color(0xffFF6701), fontSize: setSp(14)),
      ),
    );
  }
}
